<template>
  <div class="app2">
    <div class="dingbu">
      <i class="el-icon-arrow-left" @click="fh"></i>
      <h3>免密支付</h3>
    </div>
    <div class="kp">
      <ul class="infinite-list" style="overflow:auto">
        <div class="shuju" v-for="card in list">
          <img :src="card.cardImg">
          <span class="name">{{card.cardName}}</span>
          <span class="mm" @click="showPopup(card.id,card.cardStatus)">{{card.cardStatus==1?"已开通":card.cardStatus==2?"去开通":"已开通 优先支付"}}></span>
        </div>
      </ul>
    </div>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '20%' }">
      <van-button class="shezhi" @click="kaitong">设置为优先免密支付方式</van-button>
      <van-button class="shezhi" @click="open">关闭免密支付</van-button>
    </van-popup>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      list:{},
      show: false,
      id:''
    };
  },
  methods: {
    open() {
      this.show=false;
      this.$confirm('确认关闭xxx银行免密支付', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
         axios.get(`/order/NCard/updateStatus2?id=${this.id}`).then(res=> {
           this.getList();
           if(res.data.status==200){
             console.log(res.data.status+"1111111");
            this.$message.error('关闭失败')
          }else{
            this.$message.success('关闭成功')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '我再想想'
        });
      });
    },
    fh() {
      this.$router.push('/card')
    },
    showPopup(id,cardStatus) {
      localStorage.setItem('cardid', JSON.stringify(id))
      this.id=id
      localStorage.setItem('cardStatus', JSON.stringify(cardStatus))
      this.show = true;
    },
    kaitong() {
      this.$router.push('/openSecretfree')
    },
    getList() {
      axios.get('/order/NCard/findAll')
        .then((response) => {
          this.list = response.data;
        })
        .catch((error) => {
          console.error("获取数据失败：", error);
        });
    },
  },
  created() {
    this.getList();
  }
};
</script>
<style scoped>
.app2{
  width: 420px;
  height: 850px;
}
.dingbu{
  width: 420px;
  height: 50px;
  float: left;
  i{
    float: left;
    font-size: 25px;
    margin-top: 15px;
    margin-left: 10px;
  }
  h3{
    float: left;
    line-height: 20px;
    margin-left: 130px;
  }
}
.kp{
  width: 400px;
  height: 790px;
  float: left;
  margin-left: 10px;
  ul{
    width: 400px;
    height: 770px;
  }
}
.shuju {
  width: 400px;
  height: 70px;
  border-bottom: 1px solid #a4a4a4;

  img {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .name {
    font-size: 25px;
    vertical-align: 15px;
    margin-left: 10px;
  }

  .mm {
    float: right;
    margin-top: 20px;
    margin-right: 10px;
    color: #52b7fd;
  }
}
.shezhi{
  width: 430px;
  height: 90px;
}
</style>
